'use strict';
let React = require('react');
let ReButton = require('./ReButton.jsx');
class HkfsProfitComputer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: '',
            profit: '',
            dayCount: '',
            bank: 0,
            other: 0,
            hkfs: 0,
            bankProfit: 0.01,
            otherProfit: 0.025
        };
        this.getResult = this.getResult.bind(this);
        this.clearResult = this.clearResult.bind(this);
    }


    //输入值改变
    setOption(objName, event) {
        let obj = {};
        obj[objName] = event.target.value;
        setTimeout(()=> {
            this.setState(obj);
        }, 0);
    }

    getResult() {
        let highest=150;
        if (this.state.count > 0 && this.state.profit > 0 && this.state.dayCount > 0) {
            let HkfsResult = this.state.count * this.state.profit * this.state.dayCount / 36500;
            let OtherResult = this.state.count * this.state.otherProfit * this.state.dayCount / 365;
            let BankResult = this.state.count * this.state.bankProfit * this.state.dayCount / 365;
            this.setState({
                bank: BankResult.toFixed(2),
                other: OtherResult.toFixed(2),
                hkfs: HkfsResult.toFixed(2)
            });
            var otherDivHeight=this.state.otherProfit * 100 > this.state.profit ? highest : (this.state.otherProfit * 100 / this.state.profit * highest);
            this.refs.OtherDiv.style.height = otherDivHeight + 'px';
            this.refs.BankDiv.style.height = this.state.bankProfit / this.state.otherProfit * otherDivHeight + 'px';
            this.refs.HkfsDiv.style.height = this.state.otherProfit * 100 < this.state.profit ? highest+'px' : (this.state.profit / 100 / this.state.otherProfit * highest) + 'px';
        }
    }

    clearResult() {
        this.setState({
                count: '',
                profit: '',
                dayCount: '',
                bank: 0,
                other: 0,
                hkfs: 0
            }
        );
        this.refs.BankDiv.style.height = '0px';
        this.refs.OtherDiv.style.height = '0px';
        this.refs.HkfsDiv.style.height = '0px';
        this.refs.count.value='';
        this.refs.profit.value='';
        this.refs.dayCount.value='';
    }

    //小数验证
    clearNoNumAndPoint(event) {
        let obj=event.target||event.srcElement;
        //先把非数字的都替换掉，除了数字和.
        obj.value = obj.value.replace(/[^\d.]/g, "");
        //必须保证第一个为数字而不是.
        obj.value = obj.value.replace(/^\./g, "");
        //保证只有出现一个.而没有多个.
        obj.value = obj.value.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上
        obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    }

    //整数验证
    clearNotNum(event){
        let obj=event.target||event.srcElement;
        obj.value = obj.value.replace(/[^\d]/g, "");
    }


    render() {
        return <div className="HkfsProfitComputerContainer">
            <div className="HkfsProfitComputerContent rightLine">
                <div>
                    <div className="inputDiv">
                        <span className="inputTitle">投资金额</span>
                        <input onBlur={this.setOption.bind(this,'count')} ref="count" placeholder="请输入投资金额" onKeyUp={this.clearNoNumAndPoint}/>
                        <span className="inputUnit">元</span>
                    </div>
                    <div className="inputDiv">
                        <span className="inputTitle">预期年化</span>
                        <input onBlur={this.setOption.bind(this,'profit')} ref="profit" placeholder="请输入年化收益率"  onKeyUp={this.clearNoNumAndPoint}/>
                        <span className="inputUnit">%</span>
                    </div>
                    <div className="inputDiv">
                        <span className="inputTitle">理财期限</span>
                        <input onBlur={this.setOption.bind(this,'dayCount')} ref="dayCount" placeholder="请输入投资期限"  onKeyUp={this.clearNotNum}/>
                        <span className="inputUnit">天</span>
                    </div>
                    <div className="ButtonDiv">
                        <ReButton reClass="profitButton" reButtonClick={this.getResult}>计算</ReButton>
                        <ReButton reClass="profitButton" reButtonClick={this.clearResult}>重置</ReButton>
                    </div>
                    <div className="TipsDiv">
                        <span>收益总计：</span><span className="TipsProfit">{this.state.hkfs}</span><span>元</span>
                    </div>
                </div>
            </div>
            <div className="HkfsProfitComputerContent">
                <div>
                    <div className="ProfitContentTitle">投资在不同平台的收益对比</div>
                    <div className="ProfitContentGroup">
                        <div className="ProfitContent">
                            <div className="platformResult">{this.state.bank}</div>
                            <div ref="BankDiv" className="ProfitDiv"></div>
                            <div className="platform">银行</div>
                        </div>
                        <div className="ProfitContent">
                            <div className="platformResult">{this.state.other}</div>
                            <div ref="OtherDiv" className="ProfitDiv"></div>
                            <div className="platform">某某宝</div>
                        </div>
                        <div className="ProfitContent">
                            <div className="platformResult">{this.state.hkfs}</div>
                            <div ref="HkfsDiv" className="ProfitDiv"></div>
                            <div className="platform">华财通</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }

}

module.exports = HkfsProfitComputer;